<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head">
				<scroll-view scroll-x class="tab_nav">
					<view class="tab_item" :class="[category_id==item.id?'active':'']" v-for="(item,index) in category"
						@click="chooseNav(index,item.id)">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="pt108 plr30 pb30">
				<swiper class="p_swiper" indicator-color="#FFF" indicator-active-color="var(--primary)"
					:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					v-if="category.length>0 && category[categoryIndex].news.length>0">
					<swiper-item v-for="(item,index) in category[categoryIndex].news">
						<view class="swiper_item" @click="newsDetail(item.id)">
							<image :src="cdnurl(item.thumb)" mode="aspectFill" class="img"></image>
							<view class="title_item">
								<view class="title1 plr10 m-ellipsis">{{item.title}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view>
					<view class="news_item flex-box" v-for="(item,index) in news" @click="newsDetail(item.id)">
						<image :src="cdnurl(item.thumb)" mode="aspectFill" class="cover"></image>
						<view class="flex-grow-1 pl30">
							<view class="fs30 fwb col3 lh42 m-ellipsis-l2">{{item.title}}</view>
							<view class="mt10 fs24 col3">{{formatDatetime(item.updatetime,'yyyy-mm-dd')}}</view>
						</view>
					</view>
					<view class="nothing" v-if="newsMore.nothing">
						<image src="@/static/public/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无资讯信息</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetch()">{{newsMore.text}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				category: [],
				categoryIndex: 0,
				category_id: 0,
				news: [],
				newsMore: {
					page: 1
				},
				nindex: 0
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {

			let page = this;
			this.$core.get({
				url: '/xilujob.common/news_category',
				loading: false,
				success(ret, response) {
					if (ret.data.length > 0) {
						page.category = ret.data;
						page.category_id = ret.data[0].id;
						page.fetch();
					}
				}
			});
		},
		onReachBottom() {
			this.fetch();
		},
		methods: {
			chooseNav(index, id) {
				this.categoryIndex = index;
				this.category_id = id;
				this.refresh()
			},
			refresh() {
				this.news = [];
				this.newsMore = {
					page: 1
				};
				this.fetch();
			},
			fetch() {
				var category_id = this.category_id;
				this.$util.fetch(this, '/xilujob.news/lists', {
					category_id: category_id
				}, 'newsMore', 'news', 'data');
			},
			newsDetail(id) {
				uni.navigateTo({
					url: '/pages/user/news_info?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_nav {
		width: 100%;
		height: 88rpx;
		white-space: nowrap;
		background: #fff;

		.tab_item {
			height: 88rpx;
			margin-right: 50rpx;
			display: inline-block;
			vertical-align: top;
			line-height: 88rpx;
			font-size: 26rpx;
			color: #333;
			position: relative;

		}

		.tab_item:first-child {
			margin-left: 40rpx;
		}

		.tab_item:last-child {
			margin-right: 40rpx;
		}

		.tab_item.active {
			font-size: 26rpx;
			color: var(--primary);
			font-weight: bold;
		}

		.tab_item.active::after {
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			width: 36rpx;
			height: 6rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
		}
	}

	.pt108 {
		padding-top: 108rpx;
	}

	.p_swiper {
		width: 100%;
		height: 282rpx;
		border-radius: 15rpx;

		.swiper_item {
			width: 100%;
			height: 282rpx;
			border-radius: 15rpx;
			position: relative;

			.img {
				width: 100%;
				height: 282rpx;
				display: block;
				border-radius: 15rpx;
			}

			.title_item {
				width: 100%;
				height: 58rpx;
				border-radius: 0rpx 0rpx 15rpx 15rpx;
				border: 1px solid #979797;
				background: rgba(0, 0, 0, 0.5);
				color: #FFF;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 2;
			}

			.title1 {
				width: 515rpx;
				line-height: 58rpx;
			}
		}
	}

	.news_item {
		width: 690rpx;
		height: 188rpx;
		margin-top: 20rpx;
		padding: 0 30rpx;
		background: #fff;
		border-radius: 18rpx;

		.cover {
			width: 188rpx;
			height: 131rpx;
			border-radius: 10rpx;
		}
	}

	.hires_item {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 20rpx;
		padding: 30rpx;

		&:first-child {
			margin-top: 0;
		}
	}
</style>